<template>
	<view class="lease-order-card">
		<view class="card-top mt20">
			<view class="card-title xxl">
				请上传您的二代身份证
			</view>
			<view class="card-introduction nr mt20">请上传大陆公民持有的本人二代身份证，并确保身份证边框完整，字体清晰，证件号码清晰可见。</view>
		</view>
		<view class="card-content">
			<view class="mt20 row-between">
				<view>
					<u-upload ref="uUpload" width="340" height="212" :auto-upload="false" :custom-btn="true"
						:border-bottom="false" :show-progress="false" :file-list="uploadedPicturesID" max-count="1"
						@on-remove="handlePictureRemoveID" @on-choose-complete="handlePictureUploadID">
						<view slot="addBtn" class="picture-button--upload">
							<image src="@/bundle/static/images/cardZ.png" mode="aspectFit" style="width: 340rpx;height: 212rpx;">
							</image>
						</view>
					</u-upload>
				</view>
				<view>
					<u-upload ref="uUpload" width="340" height="212" :auto-upload="false" :custom-btn="true"
						:border-bottom="false" :show-progress="false" :file-list="backuploadedPicturesID" max-count="1"
						@on-remove="backRemove" @on-choose-complete="backcard">
						<view slot="addBtn" class="picture-button--upload">
							<image src="@/bundle/static/images/cardF.png" mode="aspectFit" style="width: 340rpx;height: 212rpx;">
							</image>
						</view>
					</u-upload>
				</view>
			</view>
		</view>
		<view class="">
			<view class="card-information">
				<view class="form-item row-between">
					<text class="label">真实姓名</text>
					<input class="input" type="text" v-model="real_name" placeholder="请填写您的姓名" />
				</view>
				<view class="form-item row-between">
					<text class="label">身份证号</text>
					<input class="input" type="text" v-model="identity_card" placeholder="请填写身份证号码" />
				</view>
			</view>
		</view>
		<view class="card-button" >
			<u-button type="primary" shape="circle" @click="submits">提交</u-button>
		</view>

	</view>
</template>

<script>
	import {
		userRealnameAuth,
		realnameAuthDetail
	} from '@/api/lease.js'
	import {
		uploadFile
	} from '@/utils/tools'
	export default {
		data() {
			return {
				uploadedPicturesID: [], // 正身份证已上传图片
				picturesID: [], //正身份证图片
				backuploadedPicturesID: [], //反正身份证已上传图片
				banckpicturesID: [], //反正身份证图片
				real_name: '',
				identity_card: '',
				isBtn:true,
				id:'' //租赁id
			}
		},
		
		methods: {
			// 上传正面
			handlePictureUploadID(lists, index) {

				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});
				const LEN = lists.length;
				const initLen = this.picturesID.length;
				for (let i = initLen; i < LEN; ++i) {
					const file = {
						...lists[i]
					};

					uploadFile(file.url).then(res => {
						this.picturesID.push(res.url)
					}).catch(err => {
						this.$toast({
							title: '上传失败'
						})
					}).finally(() => {
						uni.hideLoading();
					})
				}
			},
			// 图片删除
			handlePictureRemoveID(index, lists, name) {
				this.picturesID.splice(index, 1)
			},

			// 上传反面
			backcard(lists, index) {

				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});
				const LEN = lists.length;
				const initLen = this.banckpicturesID.length;
				for (let i = initLen; i < LEN; ++i) {
					const file = {
						...lists[i]
					};

					uploadFile(file.url).then(res => {
						this.banckpicturesID.push(res.url)
					}).catch(err => {
						this.$toast({
							title: '上传失败'
						})
					}).finally(() => {
						uni.hideLoading();
					})
				}
			},
			// 删除反面
			backRemove(index, lists, name) {
				this.banckpicturesID.splice(index, 1)
			},
			submits() {
				console.log(this.picturesID)
				if (this.picturesID.length == 0 || this.banckpicturesID == 0) {
					this.$toast({
						title: '请先上传完整身份证！'
					});
				} else if (this.real_name == '') {
					this.$toast({
						title: '请输入姓名！'
					});
				} else if (this.identity_card == '') {
					this.$toast({
						title: '请输入身份证号！'
					})

				} else {
					userRealnameAuth({
						id:this.id,
						real_name: this.real_name,
						identity_card: this.identity_card,
						portrait_iamge: this.picturesID.toString(),
						emblem_image: this.banckpicturesID.toString()
					}).then(res => {
						console.log(res)
						if (res.code != 1) {
							this.$toast({
								title: res.msg
							});
							return;
						}
						this.$toast({
							title: '提交成功！',
							icon: 'success'
						});
						uni.navigateBack({delta: 1})
					})
				}

			},

		},
		onLoad(option) {
			this.id=option.id;
			realnameAuthDetail({id:this.id}).then(res => {
				if (res.code == 1) {
					if(res.data!=null){
						this.isBtn=false;
						this.identity_card = res.data.identity_card;
						this.real_name = res.data.real_name;
						this.picturesID.push(res.data.portrait_iamge);
						this.banckpicturesID.push(res.data.emblem_image)
						this.uploadedPicturesID.push({url:res.data.portrait_iamge});
						this.backuploadedPicturesID.push({url:res.data.emblem_image});
					}
					
				}

			})
		}

	}
</script>

<style lang="scss" scoped>
	.lease-order-card {
		.card-top {
			padding: 28rpx;

			.card-title {
				font-weight: 400;
				color: #000000E5
			}

			.card-introduction {
				color: #00000066;
			}
		}

		.card-content {
			padding: 24rpx;
		}

		.card-information {
			margin: 24rpx;
			background-color: #ffffff;
			border-radius: 24rpx;

			.form-item {
				font-weight: 400;
				font-size: 32rpx;
				color: #000000E5;
				height: 120rpx;
				margin-left: 24rpx;
				border-bottom: 2rpx solid #f9f9f9;

				.input {
					height: 100%;
					text-align: right;
					padding-right: 24rpx;
					flex: 1;
				}
			}
		}

		.card-button {
			position: fixed;
			bottom: 0;
			width: 100%;
			background: #ffffff;
			padding: 30rpx;
			z-index: 1000;
			/* 确保不被其他元素覆盖 */
		}


	}
</style>